<template>
  <div>
    当前count值为:{{ $store.state.count }}
    <el-button type="danger" @click="handleSub" icon="el-icon-minus" size="small">减少</el-button>
    <el-button type="danger" @click="handleSubN" icon="el-icon-minus" size="small">减少N</el-button>
    <el-button type="danger" @click="handleSubAsync" icon="el-icon-minus" size="small">减少 async</el-button>
    <el-button type="danger" @click="handleSubAsyncN" icon="el-icon-minus" size="small">减少N async</el-button>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {
  name: "Subtraction",
  methods: {
    // 将指定的mutations函数，映射为当前组件的methods函数
    ...mapMutations(['sub', 'subN']),

    handleSub() {
      this.sub()
    },
    handleSubN() {
      this.subN(5)
    },
    handleSubAsync(){
      // 这里的dispatch函数专门用于触发action
      this.$store.dispatch('subAsync')
    },
    handleSubAsyncN(){
      this.$store.dispatch('subAsyncN',2)
    }
  }
}
</script>

<style scoped>
.el-button {
  margin: 5px;
}
</style>
